<!-- This file is an explanation of the AJAX page -->

<h3>The HTML markup for this example</h3>

<p>The markup defines a form with the inputs for numbers, operation and buttons. Note the <code>data-request</code> and <code>data-request-update</code> attributes on the FORM tag. Those two attributes tell the AJAX framework which PHP function must handle the request and what page element must be updated when the result comes back from the server.</p>

<div class="collapsed-code-block collapsed">
    <pre>{% content "ajax/form.txt" %}</pre>
    <div class="expand-code">Expand</div>
</div>

<h3>The <em>calcresult</em> partial</h3>

<p>The partial is referred in the form's <code>data-request-update</code> attribute together with the ID of the element that must be updated with the AJAX request. The partial is also rendered when the page first loads to display the default value.</p>

<pre>{% content "ajax/calcresult.txt" %}</pre>

<h3>The <em>onTest</em> PHP function</h3>

<p>That PHP function is referred in the form's <code>data-request</code> attribute and acts as the AJAX handler. It loads the submitted values, performs the requested operation, and assigns the calculated value to the <em>result</em> page variable, which is then used in the <em>calcresult</em> partial. The function is defined right in the page file, in the <a href="https://octobercms.com/docs/cms/pages#dynamic-pages">PHP section</a>.</p>

<div class="collapsed-code-block collapsed">
    <pre>{% content "ajax/handler.txt" %}</pre>
    <div class="expand-code">Expand</div>
</div>